<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h1>姓名：{{ name }} </h1><br>
        姓名：{{ name }} <br>
        姓名：{{ name }} <br>
        姓名：{{ name }} <br>
        姓名：{{ name }} <br>
        性别：{{ sex }} <br>
        年龄：{{ age }} <br>
        信息：{{ msg }}
    </div>
</body>
<script>

    const vm = Ly({
        el:".app",
        data: {
            name:"李四",
            age:19,
            sex:"男"
        }
    })

    console.log(vm)

    // vm.age = 21;

    vm.msg = "hello";



    // (自定义简易版Vue）
    function Ly(obj){
        // 获取要操作的DOM元素（要操作的DOM的根元素）
        const ele = document.querySelector(obj.el);
        // 获取DOM的初始内容
        let startTxt = ele.innerHTML;
        // 代理对象数据
        const target = new Proxy(obj.data, {
            get(origin, attr){
                return origin[attr];
            },
            set(origin, attr, val){
                origin[attr] = val;
                // 当数据发生改变后，重新渲染DOM内容
                render(startTxt)
            }
        })
        // 初始渲染DOM内容
        render(startTxt);

        // DOM渲染功能
        function render(changeTxt){
            // 获取DOM内容中的 双花括号 标志
            const arr = startTxt.match(/{{[^}]+}}/g);
            // 遍历所有的双花括号标志
            arr.forEach(val=>{
                // 拿到双花括号内的属性名
                const key = val.match(/[a-z_$][a-z_$0-9]+/)[0];
                // 准备多次替换字符：老字符为带双花括号标志的字符，新字符为双花括号内的属性名对应的属性值
                changeTxt = changeTxt.replace(val,  obj.data[key]);
            })
            // 将替换之后的字符，设置到原DOM元素
            ele.innerHTML = changeTxt;
        }
        // 为了在外部能拿到代理之后的对象，返回
        return target;
    }

    
</script>
</html>